<template>
  <div ref="chartRef"></div>
</template>

<script lang="ts" setup>
import useResize from '@/hooks/useResize';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
interface propType {
  cpuPerscent: string | number;
}
const props = withDefaults(defineProps<propType>(), { cpuPerscent: 0 });

function getColor() {
  let curPercent = Number(props.cpuPerscent);
  if (curPercent < 30) {
    return '#67E0E3';
  } else if (curPercent > 70) {
    return '#FD666D';
  } else {
    return '#37A2DA';
  }
}

//注册echart
//注意如果实例是响应式的，tootip会不生效
let chartInstance = null;
const chartRef = ref();
const chartData = ref([]);
let colors = ['#67E0E3', '#37A2DA', '#FD666D'];
//初始化chart
const initChart = () => {
  //注册echart实例
  chartInstance = proxy?.$echarts.init(chartRef.value);

  const initOption = {
    title: {
      text: 'CPU使用率',
      textStyle: {
        color: '#606266',
        fontWeight: 'normal',
        fontSize: 20
      },
      bottom: '20%',
      left: 'center'
    },
    series: [
      {
        type: 'gauge',
        center: ['50%', '50%'], // 仪表位置
        radius: '100%', //仪表大小
        axisLine: {
          // 仪表盘
          lineStyle: {
            width: 20,
            color: [
              [0.3, colors[0]],
              [0.7, colors[1]],
              [1, colors[2]]
            ]
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          length: 15,
          lineStyle: {
            width: 1,
            color: '#999'
          }
        },
        axisLabel: {
          distance: 25,
          color: '#999',
          fontSize: 20
        },
        pointer: {
          itemStyle: {
            // 仪表盘指针
            icon: 'none',
            width: 10,
            length: '60%',
            color: '#FBB61B'
          }
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 15,
          itemStyle: {
            borderWidth: 2,
            itemStyle: {
              color: '#FBB61B',
              borderColor: '#FBB61B'
            }
          }
        },
        detail: {
          valueAnimation: true,
          fontSize: 30,
          formatter: '{value} %',
          color: '#FBB61B',
          offsetCenter: [0, '30%']
        }
      }
    ]
  };
  chartInstance.setOption(initOption);
};

//获取chart数据
const getChartData = (outData) => {
  chartData.value = outData;
  updateChart();
};

//更新chart图表
const updateChart = () => {
  const dataOption = {
    series: [
      {
        detail: {
          color: getColor()
        },
        data: [
          {
            value: props.cpuPerscent
          }
        ]
      }
    ]
  };
  chartInstance.setOption(dataOption);
};
watch(
  () => props.cpuPerscent,
  () => {
    if (chartInstance) {
      getChartData(props.cpuPerscent);
    } else {
      nextTick(() => {
        initChart();
        getChartData(props.cpuPerscent);
      });
    }
  },
  {
    deep: true,
    immediate: true
  }
);

//#region usesize
function resize() {
  chartInstance.resize();
}

// 暴露函数 （供hook调用）
defineExpose({
  getChartData,
  resize
});

useResize();
//#endregion
</script>
